<template>
    <div>
        <div class="Distribution-Top">
            <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
                学生分布情况
            </p>
        </div>
        <div ref="chart" class="Distribution-Bottom">

        </div>
    </div>
</template>

<script setup>

import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { getstudents } from '../../api/intelligentDetection'

const chart = ref(null);
let myChart = null;

const DistributionBottom = async () => {
    let res = await getstudents();
    var option = res.data.data.result[0];
    option.legend = {
        textStyle: {
            color: '#fff', // 图例文字颜色为白色
            fontSize: 10
        },
        icon: 'circle', // 将图例的图标设置为圆形
        right: 10, // 将图例靠右对齐
        top: 20,
        itemWidth: 10, // 设置圆点的宽度（大小）
        itemHeight: 10, // 设置圆点的高度（大小）
    }
    option.xAxis = {
        type: 'category',
        boundaryGap: true, // x轴刻度
        axisLine: {
            lineStyle: { color: '#2B3E7B' }, // X轴颜色改成白色
        },
        axisLabel: {
            color: '#AED2FF', // X轴标签颜色改成白色
            // interval: 0, // 强制显示所有的X轴标签
            rotate: 0 // 保持水平显示
        }
    }
    option.yAxis = {
        axisLabel: {
            color: '#AED2FF', // Y轴标签颜色改成深色
        },
        splitLine: {
            show: true,// 显示Y轴网格线
            lineStyle: {
                color: '#2B3E7B', // 网格线颜色
                width: 1, // 网格线宽度
                type: 'solid', // 网格线类型，'solid'为实线
            }
        }
    };
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
}
// 绘制图表
// 配置折线图的选项
// option = {
//     title: {
//         // text: '场所活动统计',
//     },
//     tooltip: {
//         trigger: 'axis',
//     },
//     // data.legend.data
//     legend: {
//         data: ['运动区', '宿舍区', '教学区', '吸烟区', '干饭区'],
// textStyle: {
//     color: '#fff', // 图例文字颜色为白色
//     fontSize: 10
// },
// icon: 'circle', // 将图例的图标设置为圆形
// right: 10, // 将图例靠右对齐
// top: 20,
// itemWidth: 10, // 设置圆点的宽度（大小）
// itemHeight: 10, // 设置圆点的高度（大小）
//     },
//     grid: {
//         left: '12%', // 设置图表网格左边距为 20%，将图表向右移动
//         bottom: '10%', // 设置图表网格顶部边距
//     },
// xAxis: {
// type: 'category',
//     boundaryGap: false,
//         data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
//             axisLine: {
//     lineStyle: { color: '#2B3E7B' }, // X轴颜色改成白色
// },
// axisLabel: {
//     color: '#AED2FF', // X轴标签颜色改成白色
//         // interval: 0, // 强制显示所有的X轴标签
//         rotate: 0 // 保持水平显示
// }
//     },
// yAxis: {
//     type: 'value',
//         min: 0,
//             max: 1000,
//                 interval: 250,
//                     axisLine: {
//         lineStyle: { color: '#ffffff' }, // Y轴颜色改成白色
//     },
//     axisLabel: {
//         color: '#AED2FF', // Y轴标签颜色改成深色
//         },
// splitLine: {
//     show: true,// 显示Y轴网格线
//         lineStyle: {
//         color: '#2B3E7B', // 网格线颜色
//             width: 1, // 网格线宽度
//                 type: 'solid', // 网格线类型，'solid'为实线
//         }
// }
// },
//     series: [
//         {
//             name: '运动区',
//             type: 'line',
//             data: [200, 400, 300, 500, 200, 100, 250, 500, 700, 800, 600, 400, 300],
//             symbol: 'none', // 不显示圆点
//             symbolSize: 8,
//             lineStyle: { color: 'yellow' },
//             itemStyle: { color: 'yellow' },
//         },
//         {
//             name: '宿舍区',
//             type: 'line',
//             data: [100, 200, 150, 100, 300, 200, 400, 500, 600, 700, 800, 900, 1000],
//             symbol: 'none',
//             symbolSize: 8,
//             lineStyle: { color: 'green' },
//             itemStyle: { color: 'green' },
//         },
//         {
//             name: '教学区',
//             type: 'line',
//             data: [300, 500, 700, 900, 800, 600, 500, 400, 300, 200, 100, 50, 100],
//             symbol: 'none',
//             symbolSize: 8,
//             lineStyle: { color: 'blue' },
//             itemStyle: { color: 'blue' },
//         },
//         {
//             name: '吸烟区',
//             type: 'line',
//             data: [50, 100, 200, 300, 400, 300, 200, 100, 50, 25, 10, 5, 1],
//             symbol: 'none',
//             symbolSize: 8,
//             lineStyle: { color: 'red' },
//             itemStyle: { color: 'red' },
//         },
//         {
//             name: '干饭区',
//             type: 'line',
//             data: [400, 300, 200, 100, 500, 700, 900, 1000, 800, 600, 400, 200, 100],
//             symbol: 'none',
//             symbolSize: 8,
//             lineStyle: { color: 'purple' },
//             itemStyle: { color: 'purple' },
//         },
//     ],
// };


onMounted(() => {
    DistributionBottom();
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
});

</script>

<style lang="scss" scoped>
.Distribution-Top {
    position: fixed;
    left: 70px;
    top: 402px;
    width: 330px;
    height: 30px;
    opacity: 1;
    /* background: linear-gradient(229.52deg, rgba(14, 95, 255, 0.5) 0%, rgba(14, 95, 255, 0.22) 100%);
    border: 1.6px solid rgba(61, 110, 174, 1); */
    background-image: url('../../assets/Path2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.Distribution-Bottom {
    width: 330px;
    height: 226px;
    position: fixed;
    left: 70px;
    top: 450px;
    opacity: 1;
    background: rgba(12, 29, 95, 1);
}
</style>